<template>
	<view class="mobile-item-container">
	  <Navbar :title="title" bgColor="#fff" :h5Show="true"></Navbar>
	  <u-toast ref="uToast"></u-toast>
	  <view style="font-size: 40rpx; font-weight: bold;">{{form.title}}</view>
	  <view style="display: flex; font-size: 12px; color: #909399;text-align: center;">
	    <u-icon name="clock" size="12"></u-icon>
	    <text>发布时间：{{form.releaseTime}}</text>
	    <u-icon style="margin-left: 5%;" name="account" size="12"></u-icon>
	    <text>来源：{{form.comeForm}}</text>
	    <u-icon style="margin-left: 5%;" name="eye" size="12"></u-icon>
	    <text>点击量：{{form.clickNum}}</text>
	  </view>
	  <view style="margin-top: 40rpx;">
	    <u-parse :content="form.content"></u-parse>
	  </view>
	  <u-divider text="文章操作"></u-divider>
	  <u-row :gutter="20" style="margin-top: 36px;">
		<!-- <u-col :span="4">
		  <u-button type="primary" text="评论" @click="reviewData"></u-button>
		</u-col> -->
	    <u-col :span="2">
	      <u-button v-if="form.collectFlag == -1" type="primary" text="收藏" @click="collectData"></u-button>
		  <u-button v-else type="primary" text="取消收藏" @click="collectDel"></u-button>
	    </u-col>
		<u-col :span="2">
			<u-button type="success" text="评论" @click="reviewData"></u-button>
		</u-col>
	    <u-col :span="3">
	      <u-button icon="arrow-left" text="返回" plain @click="goBack()"></u-button>
	    </u-col>
		<u-col v-if="isRelease" :span="2">
			<u-button type="success" text="修改" @click="editData"></u-button>
		</u-col>
		<u-col v-if="isRelease" :span="2">
			<u-button type="error" text="删除" @click="delData"></u-button>
		</u-col>
	  </u-row>
	  <u-divider text="评论列表"></u-divider>
	  <u-row>
		  <u-col v-if="reviewList != null && reviewList.length > 0">
			<u-read-more ref="uReadMore" showHeight="300" :toggle="true" closeText="查看更多评论">
		  		<review-detail :comments="reviewList" @load="load"></review-detail>
		  	</u-read-more>
		  </u-col>
	  </u-row>
	  
	  <u-modal :show="show"  title="开始评论"
	   confirmText="评论"
	   @confirm="confirm" @cancel="cancel" :showCancelButton="true">
	  			<view class="slot-content" style="width: 100%;">
	  				<u--textarea v-model="reviewForm.content" maxlength="-1" count autoHeight placeholder="说点什么吧~" confirm-type="send"></u--textarea>
	  			</view>
	  		</u-modal>
	</view>
</template>

<script>
	import * as detailApi from '@/api/business/detail'
	import * as collectApi from '@/api/business/collect'
	import * as reviewApi from '@/api/business/review'
	
	import ReviewDetail from '@/components/ReviewDetail/ReviewDetail.vue';
	import Navbar from '@/components/navbar/Navbar'
	
	export default {
	  components: {
	    Navbar,ReviewDetail
	  },
		data() {
			return {
				id: undefined,
				columnId: undefined,
				form: {},
				title: '',
				isRelease: false,
				reviewList: [],
				show: false,
				reviewForm: {
					parentId: 0,
					content: undefined,
					detailId: undefined
				}
			}
		},
		mounted() {
		    const app = this;
		    uni.$on('update', function(data) {
				if(data.msg == 'getReview'){
					app.getReview()
				}else{
					app.loadData()
				}
		    })
		},    
		//为了优化代码，可以加上移除事件，避免重复监听事件
		onUnload() {
		    // 移除监听事件  
		    uni.$off('update');
		},
		onLoad (params) {
		  this.id = params.id
		  this.loadData()
		  this.getReview()
		},
		methods: {
			load(){
				this.$refs.uReadMore.init();
			},
			reviewData(){
				this.reviewForm.parentId = 0
				this.reviewForm.detailId = this.id
				this.show = true;
			},
			confirm(){
				reviewApi.reviewAdd(this.reviewForm).then(res => {
					this.show = false;
					this.getReview()
				})
			},
			cancel(){
				this.show = false;
			},
			toAllReply() {
				uni.navigateTo({ url: '/pages/business/columnDetail/reply?id=' + this.id})
			},
			getReview(){
				reviewApi.reviewList({detailId: this.id}).then(res => {
					this.reviewList = res.data
				})
			},
		  loadData () {
		    const app = this
		    detailApi.detailById(this.id).then(res => {
		      app.form = res.data
			  this.title = res.data.columnName
			  this.columnId = res.data.columnId
			  if(this.$store.state.userInfo != null && this.$store.state.userInfo.userId == res.data.userId){
				app.isRelease = true
			  }
		    })
		  },
		  goBack () {
			uni.navigateBack({
			    delta: 1, // 返回层数，2则上上页
			    success() {
			        uni.$emit('update',{msg:'页面更新'})
			    }
			})
		  },
		  collectData(){
			collectApi.collectAdd({detailId: this.id}).then(res => {
				this.$refs.uToast.show({
					type: 'success',
					icon: false,
					title: '失败主题',
					message: "收藏成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
				this.loadData()
			})
		  },
		  collectDel(){
			collectApi.collectDelete(this.id).then(res => {
				this.$refs.uToast.show({
					type: 'success',
					icon: false,
					title: '失败主题',
					message: "取消收藏成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
				this.loadData()
			})
		  },
		  delData(){
			detailApi.detailDelete(this.id).then(res => {
				
				this.$refs.uToast.show({
					type: 'success',
					icon: false,
					title: '失败主题',
					message: "删除成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
				this.goBack ()
			})
		  },
		  editData(){
			  uni.navigateTo({ url: '/pages/business/columnDetail/add?columnId=' + this.columnId + '&id=' + this.id + '&isPic=' + this.form.isPic})
		  }
		}
	}
</script>

<style lang="scss" scoped>
.comment {
	display: flex;
	padding: 30rpx;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			.name {
				color: #5677fc;
			}
			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
			.highlight {
				color: #5677fc;
				.num {
					color: #5677fc;
				}
			}
		}
		.content {
			margin-bottom: 10rpx;
		}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			.item {
				padding: 20rpx;
				border-bottom: solid 2rpx $u-border-color;
				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
			.reply {
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
}
</style>

